<!--
 * @Author: your name
 * @Date: 2022-01-07 14:58:48
 * @LastEditTime: 2022-01-16 08:55:45
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \my-site\src\views\blog\components\blogDetail.vue
-->
<template>
  <div class="blogDetail-container" v-loading="isLoading">
      <Layout>
        <template #default>
          <div class="blogDetail-container-main" v-if="data.id" ref="blogDetail" @scroll="handleScroll">
            <h1>{{data.title}}</h1>
            <div class="description">
              <div class="date">日期：{{formatDate(data.createDate)}}</div>
              <div class="browse">浏览：{{data.scanNumber}}</div>
              <a href="#messageArea" class="comment">评论：{{data.commentNumber}}</a>
              <RouterLink :to="{
                name:'CategoryBlog',
                query:{
                  page:getRouteInfo.page,
                  limit:getRouteInfo.limit,
                },
                params:{
                  categoryId:data.category.id
                },
              }" class="category">分类：{{data.category.id}}</RouterLink>
            </div>
            <!-- 浏览器为了安全，动态数据中的元素会转化成文本，解决方案v-html指令 -->
            <div class="markdown-body" v-html="data.htmlContent"></div>
            <MessageArea title="评论列表" :subTitle="subTitle" :list="list" @submit="submit"/>
          </div>
        </template>
        <template #right>
          <div class="blogDetail-container-right" v-if="data.id">
            <h4>目录</h4>
            <BlogTOC :blogTOCData="data.toc"/>
          </div>
        </template>
      </Layout>
      <ToTop />
  </div>
</template>

<script>
// 获取单篇博客数据
import {getOnlyBlog, getPagerComment,submitComment} from "@/api/blog.js"
import eventBus from "../../../utils/eventBus"
import fetchData from "@/mixins/fetchData.js"
// 布局组件
import Layout from "@/components/layout"
import BlogTOC from "./blogTOC.vue"
// 处理时间格式
import {formatDate} from "@/utils/formatDate.js"
// 处理js代码样式
import "highlight.js/styles/github.css";
import MessageArea from "@/components/messageArea"


import ToTop from "../../../components/toTop/index.vue" //回到顶部
export default {
  async created(){
    

    // console.log((localStorage.data))
    if(localStorage.data){
      // console.log(JSON.parse(localStorage.data))
      const obj = JSON.parse(localStorage.data)
      this.subTitle = obj.total
      this.list = obj.rows
      // console.log(this.subTitle, this.list)
    }else{
        getPagerComment().then(r => {
          // console.log(0)
          localStorage.data = JSON.stringify(r)
          this.subTitle = r.total
          this.list = r.rows
        })
    }
    eventBus.$on("handleScroll", this.loadMore)

  },
  async mounted(){
    eventBus.$on("toTop", this.toTop)
    
    
    
  },
  data(){
    return {
      subTitle:0,
      list:[],
      arrHTML:[],
    }
  },
  computed:{
    // 则获取路由信息
    getRouteInfo(){
    // 请求BlogList组件数据时，需要传递参数page、limi、categoryId，该些参数从路由信息中获取
    // console.log(this.$route.query.page, this.$route.query.limit, this.$route.params.categoryId)
    // 路由信息中可能不存在该参数，所以进行兼容性写法
    // 该些参数需要保持数字类型，所以进行隐式类型转换
    const page = +this.$route.query.page || 1; // 当前展示页码
    const limit = +this.$route.query.limit || 10; // 每页的数据量
    const categoryId = +this.$route.params.categoryId || -1; // -1代表获取所有数据
    return {
        page,
        limit,
        categoryId,
      }
    }
  },
  components:{
    Layout,
    BlogTOC,
    MessageArea,
    ToTop,
},
  mixins:[fetchData({})],
  methods:{
    loadMore(html){
            // console.log(html.scrollHeight -( html.scrollTop + html.clientHeight))
            if(html.scrollHeight -( html.scrollTop + html.clientHeight) <= 0){
                this.isLoading = true
                getPagerComment().then(r => {
                  const originObj = JSON.parse(localStorage.data) 
                  if(originObj.rows.concat(r.rows).length < originObj.total){
                    originObj.rows = originObj.rows.concat(r.rows)
                  }
                  localStorage.data = JSON.stringify(originObj)

                  const obj = JSON.parse(localStorage.data)
                  this.subTitle = obj.total
                  this.list = obj.rows
                  this.isLoading = false
                })
            }else{
                this.isLoading = false
            }
        },
    handleScroll(){
      
      eventBus.$emit("handleScroll", this.$refs.blogDetail)
    },
    // 回到顶部
    toTop(){
      this.$refs.blogDetail.scrollTop = 0
    },
    submit(params, callback){
      // 提交服务器
      submitComment(params).then(r => {
        // console.log(r)
        // console.log(JSON.parse(localStorage.data).rows.unshift(r))
        const originObj = JSON.parse(localStorage.data)
        originObj.rows.unshift(r)
        originObj.total += 1
        localStorage.data = JSON.stringify(originObj)

        const obj = JSON.parse(localStorage.data)
        this.subTitle = obj.total
        this.list = obj.rows

        // 通知子组件已经提交完成
        callback()
      })
    },
    async fetchData(){
      // console.log(this.$route.params.id)
      return await getOnlyBlog(this.$route.params.id)
    },
    // 处理时间格式
    formatDate,
  }
}
</script>

<style scoped lang="less">
@import "./blogDetailCss/blogDetailCss.less";
</style>